<template>
	<view class="viewWidth body">
		<view v-if='!token' style="padding-top:23vh ;">
			<u-empty mode="permission" text='请先登录 '>
			</u-empty>
			<view style="width: 60vw;margin: 10vh auto 0;">
				<u-button @click='login' iconColor="#fff" text="登录" color=" rgb(66, 83, 216)"></u-button>
			</view>
		</view>
		<template v-else>
			<view style="display:flex" v-if="userLoading">
				<view v-for="(item,index) in [1,2,3,4,5]" :key="index" class="access ">
					<view style="width: 100rpx;height: 100rpx;border-radius:100% ;" class="Skeleton">

					</view>
					<view style="width: 100rpx;height: 20rpx;" class="Skeleton">
					</view>
				</view>
			</view>
			<view style="display:flex;overflow: auto;" v-else>
				<view v-for="(item,index) in userList" :key="index" class="access" @click="userIdChange(item.id)">
					<u-avatar mode='aspectFill' :src="item.avatar" :size='user_id==item.id?"120rpx":"100rpx"'></u-avatar mode='aspectFill'>
					<u--text lines='1' :text='item.nick_name' size='24rpx' />
				</view>
			</view>
			<view style="flex: 1;margin-top: 20rpx;">
				<z-paging ref="paging" style="height: 100%;" :fixed="false" v-model="data" @query="query"
					:default-page-no="1" :default-page-size="10">
					<template v-if='loading'>
						<view v-for="(item,index) in 5" :key="index">
							<view class=" Skeleton" style="height: 30rpx;" />
							<view class="activeContent" style="border: none;">
								<view>
									<album :loading='loading' />
								</view>
								<view class=" Skeleton" style="height: 30rpx;margin-top: 20rpx;" />
							</view>
						</view>
					</template>
					<template v-else>
						<view class="activeBox" v-for="(item,index) in data" :key="index">
							<template v-if="item.type!='Conquer'">
								<view class="created_at">
									<u-avatar mode='aspectFill' :src='item.user.avatar' size='80rpx' />
									<view style="margin:0 10rpx;flex: 1;">{{item.user.nick_name}}</view>
									<view>{{formatFun(item.created_at)}}</view>
								</view>
								<view class="activeContent">
									<view class="content">
										<view>
											<album :ref='`album${index}`' :imageList='item.images'
												:video='item.videos.map(imageItem=>imageItem.url)' :index='index'
												:playIndex='playIndex' />
										</view>
										<view style="margin: 10rpx 0;">
											{{item.title}}
										</view>
									</view>
								</view>
							</template>
							<template v-else>
								<view class="created_at">
									<u-avatar mode='aspectFill' :src='item.user.avatar' size='80rpx'/>
									<view style="margin:0 10rpx;flex: 1;">{{item.user.nick_name}}</view>
									<view>{{formatFun(item.created_at)}}</view>
								</view>
								<view class="activeContent">
									<view class="content">
										<view>
											<album :ref='`album${index}`' :imageList='[{url:item.thumb}]'
												:video='[]' :index='index'
												:playIndex='playIndex' />
										</view>
										<view style="margin: 10rpx 0;">
											{{item.title}}
										</view>
									</view>
								</view>
							</template>
						</view>
					</template>
				</z-paging>
			</view>
		</template>
	</view>
</template>

<script>
	import {
		format
	} from "timeago.js";
	import album from '@/components/album.vue';
	export default {
		components: {
			album,
		},
		data() {
			return {
				user_id: null,
				userLoading: true,
				userList: [],
				token: uni.getStorageSync('token'),
				playIndex: 0,
				data: [],
				loading: true
			}
		},
		mounted() {
			if (this.token) {
				this.$api.My.Followings({
					page: 1,
					size: 100
				}).then(res => {
					this.userList = res.data.followings.data
					uni.hideLoading()
					this.userLoading = false
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
				})
			}
		},
		methods: {
			login(){
				this.$utils.navigateTo({
					url:'/Login/loginPage'
				})
			},
			userIdChange(e) {
				if(this.user_id==e){
					this.user_id=null
				}else{
				this.user_id = e
				}
				this.$refs.paging.reload()
			},
			formatFun(item) {
				return format(item, "zh_CN")
			},
			query(page, size) {
				let obj = {
					page,
					size
				}
				if (this.user_id) {
					obj.user_id = this.user_id
				}
				uni.showLoading({
					title: '加载中...'
				})
				this.$api.Active.AllList(obj).then(res => {
					uni.hideLoading()
					this.$refs.paging.complete(res.data.list)
					this.loading = false
				}).catch(err => {
					uni.$u.toast(err.data.message)
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.access {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		margin-right: 20rpx;
		text-align: center;
		margin-top: 20rpx;
	}

	.created_at {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		margin-right: 40rpx;


	}

	.body {
		padding: 20rpx 0 0;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.activeContent {
		padding: 0 0 0 35rpx;
		margin: 10rpx 0 10rpx 35rpx;
		border-left: 1rpx dashed #bbb;

		>.content {
			box-shadow: 0 0 10rpx #ddd;
			margin-right: 20rpx;
			padding: 20rpx;
			border-radius: 8rpx;
			background-color: #fff;
		}
	}



	.userBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx 0;

		>view:nth-child(2) {
			flex: 0.98;
		}
	}
</style>